<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="查询条件">
      <el-input v-model="findForm.content" placeholder="昵称 or 号码"></el-input>
    </el-form-item>
    <el-form-item label="用户状态">
      <el-select clearable v-model="findForm.state" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="注册时间">
      <el-date-picker
        v-model="findForm.addTime"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="userName"
      label="用户昵称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="role"
      label="角色名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="telephone"
      label="电话号码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态">
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="注册时间">
    </el-table-column>
    <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
        <i v-if="scope.row.state=='正常'" @click="changeState(scope.row.id)">封禁</i>
        <i v-else @click="changeState(scope.row.id)">解封</i>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <i v-if="scope.row.state=='正常'" @click="giveRole(scope.row.id)">分配角色</i>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>

  <el-dialog
    title="分配角色"
    :visible.sync="visible"
    width="50%"
    :before-close="handleClose">
    <el-radio-group v-model="radio">
      <el-radio v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id"></el-radio>
    </el-radio-group>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="save('addFrom')">保 存</el-button>
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import {addUserRole, changeUserState, findAllUsers} from "@/api/userManage";
import moment from "moment"
import {getRole, roleAll} from "@/api/role";

export default {
  name: "account",
  created() {
    this.getAllUsers()
  },
  data() {
    return {
      total: undefined,
      visible: false,
      itemList: [],
      tableData: [],
      userId: undefined,
      page: 1,
      size: 10,
      radio : undefined,
      formInline: {},
      findForm: {
        state: undefined,
        content: undefined,
        addTime: undefined
      },
      options: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '封禁'
      }, {
        value: '2',
        label: '注销'
      }]
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    save() {
      let roleId = undefined
      for (let i=0;i<this.itemList.length;i++) {
        if (this.radio === this.itemList[i].name) {
          roleId = this.itemList[i].id
        }
      }
      let role = {
        'roleId' : roleId,
        'userId': this.userId
      }
      addUserRole(role).then(res => {
        if (res.body.data) {
          this.$message.success("分配成功")
          this.handleClose()
        } else {
          this.$message.error("请重新操作")
        }
      })
    },
    getAllUsers() {
      this.findForm.size = this.size
      this.findForm.page = this.page
      if (this.findForm.addTime != undefined)
        this.findForm.addTime = moment(this.findForm.addTime).format('YYYY-MM-DD')
      findAllUsers(this.findForm).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
      }).catch(() => {
        this.findForm.addTime = undefined
      })

      roleAll().then(res => {
        this.itemList = res.body.data
      })
    },
    onSubmit() {
      this.getAllUsers()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getAllUsers()
    },
    giveRole(id) {
      this.userId = id
      getRole(id).then(res => {
        this.radio = res.body.data
        this.visible = true
      })
    },
    changeState(id) {
      this.$confirm('此操作将改变用户状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        changeUserState(id).then(res => {
          if (res.body.data == 0) {
            this.$message({
              type: 'success',
              message: '解禁成功!'
            });
          }
          if (res.body.data == 1) {
            this.$message({
              type: 'success',
              message: '封禁成功!'
            });
          }
          this.getAllUsers()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
